import React from "react";
import { connect } from 'react-redux'
import { Button, Form, Input, message, Space, Divider, Typography } from 'antd';
import { useNavigate } from "react-router-dom";
import request from "../utils/request";


function Reg(props) {
    const navigate = useNavigate()
    // console.log('props', props);
    let info
    const onFinish = (values) => {
        // console.log('Success:', values);

        if (values.password == values.checkpassword) {
            request.post('/user/reg', {

                username: values.username,
                password: values.password

            }).then(res => {
                // console.log(res);
                if (res.data.code === 200) {
                    info = message.info('注册成功')
                    navigate('/login')
                } else {
                    info = message.info('用户已存在')
                }
            })
        }
    };

    const onFinishFailed = (errorInfo) => {
        // console.log(errorInfo.values.username);
        if (!errorInfo.values.username) {
            info = message.info('用户名不能为空')

        } else if (!errorInfo.values.password) {
            info = message.info('密码不能为空')
        } else if (!errorInfo.values.checkpassword) {
            info = message.info('密码不能为空')
        } else if (!errorInfo.values.vcode) {
            info = message.info('验证码不能为空')
        }

    };
    // const onFinishFailed = (errorInfo) => {
    //     console.log('Failed:', errorInfo);
    // };

    return (
        <>
            <p>*本站部分资源会使用115网盘*</p>
            <p>注册账号</p>
            <Form
                name="basic"
                labelCol={{
                    span: 8,
                }}
                wrapperCol={{
                    span: 16,
                }}
                initialValues={{
                    remember: true,
                }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}

                autoComplete="off"
            >
                {/* 注册用户名 */}
                <Form.Item
                    label=""
                    name="username"
                    rules={[
                        {
                            required: true,
                            message: ''
                            // message: 'Please input your username!',
                        },
                    ]}
                    wrapperCol={{
                        span: 6,
                        push: 9
                    }}
                >
                    <Input placeholder="请输入您的登录账号" style={{ background: '#F5F5F5', border: ' 1px solid #EEEEEE' }} />
                </Form.Item>

                {/* 注册密码 */}
                <Form.Item
                    label=""
                    name="password"
                    rules={[
                        {
                            required: true,
                            message: ''
                            // message: 'Please input your password!',
                        },
                    ]}
                    wrapperCol={{
                        span: 6,
                        push: 9
                    }}
                >
                    <Input type="password" placeholder="请输入您的登录密码" style={{ background: '#F5F5F5', border: ' 1px solid #EEEEEE' }} />
                </Form.Item>


                {/* 确认密码 */}
                <Form.Item
                    label=""
                    name="checkpassword"
                    rules={[
                        {
                            required: true,
                            message: ''
                            // message: 'Please input your password!',
                        },
                    ]}
                    wrapperCol={{
                        span: 6,
                        push: 9
                    }}
                >
                    <Input type="password" placeholder="请输入您的确认密码" style={{ background: '#F5F5F5', border: ' 1px solid #EEEEEE' }} />
                </Form.Item>

                {/* 验证码 */}
                <Form.Item
                    label=""
                    name="vcode"
                    rules={[
                        {
                            required: true,
                            message: ''
                            // message: 'Please input your password!',
                        },
                    ]}
                    wrapperCol={{
                        span: 3,
                        push: 9
                    }}
                >
                    <Input placeholder="请输入验证码" style={{ background: '#F5F5F5', border: ' 1px solid #EEEEEE' }} />
                </Form.Item>

                {/* 立即注册按钮 */}
                <Form.Item
                    wrapperCol={{
                        offset: 9,
                        span: 6,
                    }}
                >
                    <Button block={true} type="primary" htmlType="submit" onClick={info} size='large' style={{ background: '#25252b' }}>
                        立即注册
                    </Button>
                </Form.Item>
            </Form>


            {/* 底部 */}
            <div style={{
                display: 'flex',
                justifyContent: 'center'

            }}>

                <Space split={<Divider type="vertical" />}>
                    <Typography.Link style={{ color: '#282828' }} onClick={() => {
                        navigate('/home')
                    }}>返回首页</Typography.Link>
                    <Typography.Link style={{ color: '#282828' }} onClick={() => {
                        navigate('/login')
                    }}>登录账号</Typography.Link>
                    <Typography.Link style={{ color: '#282828' }} onClick={() => {
                        navigate('/user/findpass')
                    }}>找回密码</Typography.Link>
                </Space>
            </div>
        </>

    );

}


// Login = connect((state) => {
//     console.log('state', state);

//     return {
//         user: '123'
//     }
// }, (dispatch) => {
//     return {
//         login(userInfo) {
//             dispatch({ type: 'login', payload: userInfo })
//         }
//     }
// })(Login)

// 映射Redux状态到组件的props
const mapStateToProps = function (state) {
    return {
        user: state.userInfo
    }
}

// 把修改redux的方法映射到props
const mapDispatchToProps = function (dispatch) {
    return {
        logout() {
            dispatch({ type: 'login' })
        }
    }
}
Reg = connect(mapStateToProps, mapDispatchToProps)(Reg)

export default Reg